<template>
  <el-card  :style="{'height':boxHeight}">
    <div class="testtwo">
      <div class="myhead">
        <div class="headleft"  v-model="activeName" @click="handleClick">
          <span :style="{'border-bottom':page===0?'1px solid red':''}" class="part" @click="handlePage(0)">页面1</span>
          <span :style="{'border-bottom':page===1?'1px solid red':''}" class="part" @click="handlePage(1)">页面2</span>
          <span :style="{'border-bottom':page===2?'1px solid red':''}" class="part" @click="handlePage(2)">页面3</span>
          <el-button type="success" @click="handleSon">调用子组件方法</el-button>
        </div>
        <div class="headright">
          <div class="piceritem">
            <span class="demonstration">日期：</span>
            <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期"
              size="mini"
              style="width:50%;"
              value-format="yyyy-MM-dd"
              @change="handleDater"
            >
            </el-date-picker>
          </div>
          <div class="piceritem">
            <span class="demonstration">工厂：</span>
            <el-select v-model="value2" placeholder="请选择" size="mini" style="width:50%;"
                       @change="handleGong">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div class="piceritem">
            <span class="demonstration">车型：</span>
            <el-select v-model="value3" placeholder="请选择" size="mini" style="width:50%;"
                       @change="handleChe">
              <el-option
                v-for="item in car"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
      <div class="mymain">
        <page1 ref="page1" v-show="page===0?true:false" @myfather="myfather" :options="options"></page1>
        <page2 v-show="page===1?true:false"></page2>
        <page3 v-show="page===2?true:false"></page3>
      </div>
    </div>
  </el-card>
</template>

<script>
import page1 from '@/testpage/page1.vue'
import page2 from '@/testpage/page2.vue'
import page3 from '@/testpage/page3.vue'
export default {
name: "secondpage",
  components:{
    page1,page2,page3
  },
  data(){
    return {
      activeName: 'first',
      value1:new Date(),
      value2:'',
      value3:'',
      options:[
        { value: '1', label: '工厂1' },
        { value: '2', label: '工厂2' },
      ],
      car1:[
        { value: '1号', label: '1号车型' },
        { value: '2号', label: '2号车型' },
        { value: '3号', label: '3号车型' },
      ],
      car2:[
        { value: '4号', label: '4号车型' },
        { value: '5号', label: '5号车型' },
        { value: '6号', label: '6号车型' },
      ],
      car:[],
      page:0
    }
  },

  created(){
    this.handleHeight()
  },
  mounted() {
  this.value2 = this.options[0].label
    this.car = this.car1
    this.value3 = this.car1[0].label;
  },
  methods:{
    myfather(list){
      console.log("父组件调用啦",list)
    },
    handleSon(){
      console.log("我是父组件")
      this.$refs.page1.myson()
    },
    handleClick(val){
    },
    handlePage(val){
      console.log("val",val)
      this.page = val
    },
    //监听高度，让card自适应
    handleHeight(){
      this.boxHeight = (window.innerHeight || document.documentElement.clientHeight) - 20 + 'px';
    },
    //日期改变
    handleDater(val){
      console.log("日期change",val)
    },
    //工厂
    handleGong(val){
      if(this.value2 == '1'){
        this.car = this.car1
      }else{
        this.car = this.car2
      }
      this.value3 = this.car[0].label
      console.log('this.value3',this.value3)
    },
    //车型
    handleChe(val){
      console.log("车型change",val)
    }

  }
}
</script>

<style scoped>
.testtwo{
  background-color: gray;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.myhead{
  height: 5vh;
  margin: 1%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
.headleft, .headright {
  font-size: 13px;
}
.headleft{
  flex: 1;
}
.headright{
  flex: 2;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.piceritem{
  margin: 5px;
  width: 25%;
}

</style>
